<template>
  <el-watermark :font="font" :content="['南昌南车辆段', '作业指导书平台']" :gap="[150,150]" >
  <div class="el-cover">
    <!-- 作业指导书编号 -->
    <div style="width: 100%; text-align: right;">
      <span class="cover-bh">{{ data.bh }}</span>
    </div>
    <!-- 作业指导书 -->
    <div style="width: 100%; text-align: center; margin-top: 100px;">
      <span class="cover-zyzds">作业指导书</span>
    </div>
    <!-- 作业指导书名称 -->
    <div style="width: 100%; text-align: center; margin-top: 30px;">
      <span class="cover-zyzds">{{ data.name }}</span>
    </div>
    <!-- 有效盖章 -->
    <div style="text-align: center; margin-top: 20px;">
      <img style="width: 150px; height: 150px" src="../assets/public/zhang_yes.png" alt="盖章有效">
    </div>
    <!-- 版本号、编制人、审核人、批准人 -->
    <div style="width: 100%; display: flex;justify-content: center; margin-top: 20px;">
      <div style="text-align: right; width: 52%;" >
        <span class="cover-bb-left">版本号：</span>
      </div>
      <div style="text-align: left; width: 48%;" >
        <span class="cover-bb-right">{{ data.bbh }}</span>
      </div>
    </div>
    <!-- 编制人 -->
    <div style="width: 100%; display: flex;justify-content: center; margin-top: 10px;">
      <div style="text-align: right; width: 52%;" >
        <span class="cover-bb-left">编制人：</span>
      </div>
      <div style="text-align: left; width: 48%;" >
        <span class="cover-bb-right">{{ data.bzr }}</span>
      </div>
    </div>
    <!-- 审核人 -->
    <div style="width: 100%; display: flex;justify-content: center; margin-top: 10px;">
      <div style="text-align: right; width: 52%;" >
        <span class="cover-bb-left">审核人：</span>
      </div>
      <div style="text-align: left; width: 48%;" >
        <span class="cover-bb-right">{{ data.shr }}</span>
      </div>
    </div>
    <!-- 批准人 -->
    <div style="width: 100%; display: flex;justify-content: center; margin-top: 10px;">
      <div style="text-align: right; width: 52%;" >
        <span class="cover-bb-left">批准人：</span>
      </div>
      <div style="text-align: left; width: 48%;" >
        <span class="cover-bb-right">{{ data.pzr }}</span>
      </div>
    </div>
    <!-- 页脚 -->
    <div style="margin-top: 200px;">
      <div style="text-align: left;">
        <span class="cover-fb">{{ data.fbrq }}发布</span>
      </div>
      <div style="text-align: right;">
        <span class="cover-ss">{{ data.ssrq }}实施</span>
      </div>
    </div>
    <hr>
    <!-- 南昌南车辆段 -->
    <div style="margin-top: 0px; text-align: center;">
      <span class="cover-cld">南昌局集团公司南昌南车辆段</span>
    </div>
    
  </div>
</el-watermark>
</template>

<script>
export default {
  name: 'ElCover',
  props: {
    data: {
      type: Object,
      default: {
        bh: 'Q/NCG72.JCLZ01.03/0301.0203—2019',
        name: 'XXXXXXXXXXXXX',
        bbh: 'XXXX',
        bzr: 'XXX',
        shr: 'XXX',
        pzr: 'XXX',
        fbrq: 'XXXX-XX-XX',
        ssrq: 'XXXX-XX-XX'
      }
    }
  }
}
</script>

<style scoped>

/*封面*/
.el-cover {
  /* width: calc(var(--page-width) - var(--page-margin-right) - var(--page-margin-left)); */
  width: 100%;
  height: calc(var(--page-height) - var(--page-margin-top) - var(--page-margin-bottom));
  background: var(--page-background-color);
  page-break-after: always;
  margin-bottom: 0px;
}

.el-cover span {
  color: var(--page-font-color);
}

.el-cover hr {
  margin: 5px 0;
}

.cover-bh {
  font-size: medium;
}

.cover-zyzds {
  font-size: xx-large;
}

.cover-bb-left {
  text-align: right;
  font-size: x-large;
  margin-right: auto;
}

.cover-bb-right {
  text-align: left;
  font-size: x-large;
}

.cover-fb {
  float: left;
  font-size: x-large
}

.cover-ss {
  font-size: x-large
}

.cover-cld {
  font-size: x-large;
  font-weight: bold
}
</style>